<template>
  <div class="componteAll">
    <!-- 导航栏 -->
    <hmttnav :title="type[title]" path="/my"></hmttnav>
    <!-- 公共tab栏 -->
    <div class="tab">
      <van-tabs v-model="activeName" @click="getOne">
        <van-tab :title="navTitle[title].titleOne" name="a"></van-tab>
        <van-tab
          :title="navTitle[title].titletwo"
          name="b"
          v-if="navTitle[title].titletwo"
        ></van-tab>
        <van-tab :title="navTitle[title].titletheer" name="c"></van-tab>
      </van-tabs>
    </div>
    <!-- 内容 -->
    <div class="content">
      <!-- tab导航第一个按钮内容共 -->
      <div class="zuopin" v-if="oneShow">
        没有更多了
      </div>
      <!-- tab导航第二个按钮内容共 -->
      <div class="gonggao" v-if="twoShow">
        <div class="title">欢迎来到黑马头条</div>
        <div class="time">2018-10-24 T10：24：00</div>
      </div>
      <!-- tab导航栏第三个按钮 -->
      <div class="data" v-if="theerShow">
        <div class="dataLeft">
          <span class="dataStr">粉丝数</span>
          <span class="dataNum">0</span>
        </div>
        <div class="dataRight">
          <span class="dataStr">悦读书</span>
          <span class="dataNum">0</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 导航栏标题
      type: {
        1: '黑马程序员',
        2: '关注/粉丝',
        3: '收藏/历史'
      },
      // 导航标签
      navTitle: {
        1: {
          titleOne: '作评',
          titletwo: '公告',
          titletheer: '数据'
        },
        2: {
          titleOne: '关注',
          titletheer: '粉丝'
        },
        3: {
          titleOne: '我的收藏',
          titletheer: '我的历史'
        }
      },
      title: '',
      activeName: '',
      oneShow: false,
      twoShow: false,
      theerShow: false
    }
  },
  methods: {
    getOne (name, title) {
      if (this.title === '1') {
        if (name === 'a') {
          this.oneShow = true
          this.twoShow = false
          this.theerShow = false
        } else if (name === 'b') {
          this.oneShow = false
          this.twoShow = true
          this.theerShow = false
        } else if (name === 'c') {
          this.oneShow = false
          this.twoShow = false
          this.theerShow = true
        }
      } else if (this.thistitle === '2') {
        console.log('w s 22222')
      } else if (this.title === '3') {
        console.log('w s 333333')
      }
      // console.log(name, title)
    }
  },
  created () {
    // 进入页面接收路由传值
    this.title = this.$route.query.title
  }
}
</script>
<style lang="less" scoped>
.componteAll {
  height: 100vh;
  background-color: #f5f7f9;
  .tab {
  }
  .content {
    margin-top: 15px;
    .zuopin {
      font-size: 14px;
      text-align: center;
      color: #969799;
    }
    .gonggao {
      background-color: #ffffff;
      padding: 20px 15px;
      .title {
        font-size: 16px;
        margin-bottom: 30px;
      }
      .time {
        font-size: 12px;
        color: #ccd6e3;
      }
    }
    .data {
      display: flex;
      justify-content: space-between;
      border-top: 1px solid #fafafc;
      padding: 20px;
      background-color: #ffffff;
      text-align: center;
      .dataStr {
        font-size: 16px;
      }
      .dataNum {
        font-size: 30px;
        margin-top: 10px;
      }
      .dataLeft {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 80px;
        width: 150px;
      }
      .dataRight {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 80px;
        width: 150px;
      }
    }
  }
}
</style>
